<template>
  <div class="questions-container">
    <el-card>
      <!-- 头部文字 + 按钮 -->
      <div class="btn-wrap">
        <span class="text">说明：目前支持学科和关键字条件筛选 </span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- from 表单 -->
      <questions-from @search="onSearch"></questions-from>
      <!-- /from 表单 -->
      <el-alert
        class="alert-wrap"
        :title="`数据一共 ${totalCount} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 列表 -->
      <el-table :data="questionsData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="180">
        </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span>{{ questionType[scope.row.questionType - 1].label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <span>{{ difficulty[scope.row.difficulty - 1].label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              size="small"
              circle
              plain
              @click="onQuestionView(scope.row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              circle
              plain
              @click="
                $router.push({ path: 'new', query: { id: scope.row.id } })
              "
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              circle
              plain
              @click="onDelete(scope.row.id)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              size="small"
              circle
              plain
              @click="onAddChoice(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /列表 -->

      <!-- 分页器 -->
      <el-pagination
        class="pagination-right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageparams.page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="100"
        layout="prev, pager, next,sizes, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </el-card>

    <!-- 试题预览 -->
    <questions-preview
      v-if="isDialogShow"
      v-model="isDialogShow"
      :question-info="questionInfo"
    ></questions-preview>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
import QuestionsFrom from '../components/questions-from'
import QuestionsPreview from '../components/questions-preview'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'

export default {
  name: 'Questions',
  components: {
    QuestionsFrom,
    QuestionsPreview
  },
  data() {
    return {
      totalCount: 0, // 试题总条数
      questionsData: [],
      pageparams: {
        page: 1,
        pagesize: 2
      },
      isDialogShow: false,
      questionInfo: {}, // 试题详情
      difficulty: difficulty,
      questionType: questionType
    }
  },
  created() {
    this.getAllQuestions()
  },
  methods: {
    // 获取试题列表
    async getAllQuestions() {
      const querydata = { ...arguments[0], ...this.pageparams }
      const { data: res } = await list(querydata)
      console.log(res)
      this.totalCount = res.counts
      this.questionsData = res.items
    },
    onSearch(from) {
      console.log(from)
      this.getAllQuestions(from)
    },
    // pagesize 改变
    handleSizeChange(newPagesize) {
      this.pageparams.pagesize = newPagesize
      this.getAllQuestions()
    },
    // page 改变
    handleCurrentChange(newPage) {
      this.pageparams.page = newPage
      this.getAllQuestions()
    },
    // 删除试题
    onDelete(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await remove({ id })
          if (res.success) {
            this.getAllQuestions()
            return this.$message.success('删除成功!')
          }
          this.$message.error('删除失败')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 添加精选
    onAddChoice(id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await choiceAdd({ id: id, choiceState: 1 })
          if (res.success) {
            this.getAllQuestions()
            return this.$message.success('加入成功!')
          }
          this.$message.error('加入失败')
        })
        .catch(() => {
          this.$message.info('已取消加入')
        })
    },
    // 试题预览
    async onQuestionView(id) {
      const { data: res } = await detail({ id })
      this.questionInfo = res
      this.isDialogShow = true
    }
  }
}
</script>

<style scoped lang="less">
.questions-container {
  margin: 10px;
}
.btn-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
span.text {
  font-size: 12px;
  color: pink;
}

.alert-wrap {
  margin-bottom: 15px;
}
.pagination-right {
  text-align: right;
  margin-top: 20px;
}
::v-deep .el-pagination__jump {
  margin-left: 0;
}
</style>
